<template>
    <view class="bg-[#F6F7F9] min-h-screen">
        <up-navbar title="商品评论" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="goHome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="flex items-center bg-[#fff] py-[22rpx] px-[32rpx] justify-between mb-[20rpx]">
            <view :class="current == 0 ? 'active' : ''" class="text-[26rpx] text-[#666] font-normal" @click="checkTable(0)">全部(200)</view>
            <view :class="current == 1 ? 'active' : ''" class="text-[26rpx] text-[#666] font-normal" @click="checkTable(1)">有图(200)</view>
            <view :class="current == 2 ? 'active' : ''" class="text-[26rpx] text-[#666] font-normal" @click="checkTable(2)">好评(200)</view>
            <view :class="current == 3 ? 'active' : ''" class="text-[26rpx] text-[#666] font-normal" @click="checkTable(3)">差评(200)</view>
        </view>
        <view>
            <reviewItem v-for="(item,,index) in 4" :key="index"></reviewItem>
        </view>
    </view>
</template>

<script setup>
import reviewItem from '@/components/reviewItem.vue'
import { ref } from 'vue';
let current = ref(0)
function checkTable(e){
    current.value = e
}
</script>

<style lang="scss" scoped>
.active{
    color:#C39A71;
}
</style>